<!--
 * @Description:直播卡片
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-6-02 14:10:00
 * @LastEditors: Wang Xi
 * @LastEditTime: 2023-6-02 18:30:00
-->
<template>
	<view class="lives-card-container">
		<view class="cover-box">
			<imageForSize h="366rpx" w="100%" radius="32" :src="data.cover"></imageForSize>
			<!-- <imageForSize h="366rpx" w="100%" :src="data.cover"></imageForSize> -->
			<imageForSize class="pause" size="40" :src="require('@/static/svg/pause.svg')" mode=""></imageForSize>
		</view>
		<view class="handle-info">
			<view class="info">
				<view>{{data.name}}</view>
				<view>{{data.des}}</view>
			</view>
			<u-button>进入直播</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				default: () => ({}),
				type: Object
			}
		},
		data() {
			return {}
		}
	}
</script>

<style lang="scss" scoped>
	.lives-card-container {
		height: 558rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(64, 75, 99, 0.05);
		border-radius: 32rpx 32rpx 32rpx 32rpx;

		.cover-box {
			position: relative;

			.pause {
				position: absolute;
				right: 30rpx;
				bottom: 30rpx;
			}
		}

		.handle-info {
			height: 160rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx 30rpx 0 24rpx;

			.info {
				height: 100%;

				&>view:nth-child(1) {
					font-size: 32rpx;
					color: #000000;
				}

				&>view:nth-child(2){
					color: #666666;
					font-size: 22rpx;
				}
			}

			.u-btn {
				margin: 0;
				width: 128rpx;
				height: 40rpx;
				background: #2934D0;
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
</style>
